.header {
  white-space: nowrap;
  padding-top: 2px;
  z-index: 2;
}

$header-logo-width: 215px;

.headerActions {
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - #{$header-logo-width})
}

.headerLogo, .headerButton {
  display: inline-block;
  vertical-align: middle;
}

.headerLogo {
  width: $header-logo-width;
  margin: 0;
  margin-left: 4px;
  margin-right: 6px;
}

.headerButton {
  height: 42px;
  margin: 0 3px 0 3px;
  padding: 1px 6px 0 4px;
  border-radius: 2px;
  position: relative;
  white-space: nowrap;

  &:focus:active {
    outline: none;
  }
  &:focus:not(:active) {
    outline: 1px dotted rgba(0, 0, 0, 0.5);
  }
}
.headerButton.headerButtonExpanded:focus {
  outline: none;
}
.headerButton:hover, .headerMore:hover, .headerButton.headerButtonExpanded {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: default;
}
.headerButton:first-of-type {
  margin-left: 0;
}

.headerButtonIcon {
  vertical-align: middle;
  height: 42px;
  width: 42px;
  margin-right: 0.25em;
}

.headerButtonText {
  vertical-align: middle;
  cursor: default;
}

.headerDropdownArrow {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  height: 42px;
  line-height: 42px;
  width: 20px;
}

.headerDropdown {
  position: absolute;
  top: 43px;
  right: 0;
  z-index: 4;
  background-color: #B59C95; // Same as header
  // min-width: 150px;
  max-width: 400px;
  // min-height: 100px;
  border: 1px solid rgba(0, 0, 0, 0.9);
  border-top: 3px solid transparent;
  padding: 2px;
}

.headerDropdown .headerButton {
  display: block;
}

.overwriteBoardEntry {
  min-height: 35px;
  width: calc(100% - 4px);
  padding: 4px 2px;
  white-space: normal;

  &.unavailable {
    color: rgba(0, 0, 0, 0.7);
  }

  &:not(.failed):not(.unavailable):hover {
    background-color: rgba(0, 0, 0, 0.2);
  }

  .overwriteBoardName {
    font-size: 11pt;
    white-space: nowrap;
    vertical-align: middle;
  }

  .overwriteBoardIssueIcon {
    display: inline-block;
    margin-right: 4px;
  }

  .overwriteBoardMessage {
    font-size: 10pt;
    white-space: nowrap;
    vertical-align: middle;

    a {
      color: #001281;
    }
  }
}

.headerMore {
  position: absolute;
  top: 0;
  right: 0;
}

.headerMoreImg {
  padding: 4px 4px 3px 4px;
}

$more-menu-width: 300px;
$more-menu-padding: 4px;
$more-menu-border: 1px;

.headerMoreMenu {
  background-color: #a6867e;
  box-shadow: 0 1px 2px #222222;
  border-left: $more-menu-border solid #2f1b16;
  border-bottom: $more-menu-border solid #2f1b16;
  z-index: 4;
  transition: 0.1s transform;
  transform: translateX(#{$more-menu-width + (2 * $more-menu-padding) + (2 * $more-menu-border)});
  position: fixed;
  top: 0;
  right: 0;
  padding: $more-menu-padding;
  height: 300px;
  width: $more-menu-width;
}
.headerMoreOpen .headerMoreMenu {
  transform: translateX(0);
}
